<template>
  <div class="app-container">
    <h1>设备枚举实例</h1>
    <video id="video" autoplay controls></video>
    <div class="btn-group">
      <el-button size="small" @click="startTest" style="margin-left:10px" type="primary">开始测试</el-button>
      <el-select
        v-model="selectedAudioDevice"
        @change="handleAudioChange"
        class="m-2"
        style="margin-left: 10px"
        placeholder="Select"
        size="small"
      >
        <el-option
          v-for="item in audioDevices"
          :key="item.deviceId"
          :label="item.label"
          :value="item.deviceId"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="selectedVideoDevice"
        @change="handleVideoChange"
        class="m-2"
        style="margin-left: 10px"
        placeholder="Select"
        size="small"
      >
        <el-option
          v-for="item in videoDevices"
          :key="item.deviceId"
          :label="item.label"
          :value="item.deviceId"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="selectedAudioOutputDevice"
        @change="handleAudioOutputChange"
        style="margin-left: 10px"
        class="m-2"
        placeholder="Select"
        size="small"
      >
        <el-option
          v-for="item in audioOutputDevices"
          :key="item.deviceId"
          :label="item.label"
          :value="item.deviceId"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>
<script>
import { defineComponent, onMounted, reactive, toRefs } from "vue";

export default defineComponent({
  setup() {
    const state = reactive({
      selectedAudioDevice: "",
      selectedAudioOutputDevice: "",
      selectedVideoDevice: "",
      videoDevices: [],
      audioDevices: [],
      audioOutputDevices: [],
    });
    let videoElement = document.getElementById("video");
    onMounted(() => {
      updateDevices().then((data) => {
        if (state.selectedAudioDevice === "" && data.audioDevices.length > 0) {
          state.selectedAudioDevice = data.audioDevices[0].deviceId;
        }
        if (
          state.selectedAudioOutputDevice === "" &&
          data.audioOutputDevices.length > 0
        ) {
          state.selectedAudioOutputDevice = data.audioOutputDevices[0].deviceId;
        }

        if (state.selectedVideoDevice === "" && data.videoDevices.length > 0) {
          state.selectedVideoDevice = data.videoDevices[0].deviceId;
        }
        state.videoDevices = data.videoDevices;
        state.audioDevices = data.audioDevices;
        state.audioOutputDevices = data.audioOutputDevices;
      });
      console.log(state);
    });
    const updateDevices = () => {
      return new Promise((resolve, reject) => {
        let videoDevices = [];
        let audioDevices = [];
        let audioOutputDevices = [];
        navigator.mediaDevices
          .enumerateDevices()
          .then((devices) => {
            for (let device of devices) {
              if (device.kind === "videoinput") {
                videoDevices.push(device);
              } else if (device.kind === "audioinput") {
                audioDevices.push(device);
              }
              if (device.kind === "audiooutput") {
                audioOutputDevices.push(device);
              }
            }
          })
          .then(() => {
            let data = { videoDevices, audioDevices, audioOutputDevices };
            resolve(data);
          });
      });
    };
    const handleAudioChange = (val) => {
      state.selectedAudioDevice = val;
      setTimeout(startTest(), 100);
    };
    const handleAudioOutputChange = (val) => {};
    const handleVideoChange = (val) => {};
    const startTest = () => {
      let videoElement = document.getElementById("video");
      let audioSource = state.selectedAudioDevice;
      let videoSource = state.selectedVideoDevice;
      let constraints = {
        audio: { deviceId: audioSource ? { exact: audioSource } : undefined },
        video: { deviceId: videoSource ? { exact: videoSource } : undefined },
      };
      navigator.mediaDevices
        .getUserMedia(constraints)
        .then((stream) => {
          window.stream = stream;
          videoElement.srcObject = stream;
        })
        .catch((e) => {
          console.log(e);
        });
    };
    return {
      ...toRefs(state),
      updateDevices,
      handleAudioChange,
      handleAudioOutputChange,
      handleVideoChange,
      startTest,
    };
  },
});
</script>

<style scoped>
.app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#video {
  box-sizing: border-box;
  padding: 0 10px;
  width: 100%;
  height: 500px;
}
.btn-group {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
}
</style>
